/**
 * Created by Administrator on 2017/4/20.
 */

$(function () {
    //1.设置吸顶效果
    //获取nav距离窗口顶部的距离
    var off_top = $('.nav').offset().top;
    //监听屏幕滚动
    $(window).on('scroll', function () {
        //获取屏幕滚动的距离
        var scr_top = $(window).scrollTop();
        //判断搜索栏距离顶部的高度和滚动的距离，设置吸顶效果
        if (scr_top >= off_top) {
            //图片显示
            $('.nav_logo>img').css({opacity: 1});
            //搜索栏吸顶
            $('.nav').css({
                position: 'fixed',
                top: 0
            });
            //火箭显示
            $('.to_Top').fadeIn(200);
        } else {
            //图片消失
            $('.nav_logo>img').css({opacity: 0});
            //搜索栏复原
            $('.nav').css({
                position: 'absolute',
                top: off_top
            })
            //火箭消失
            $('.to_Top').fadeOut(200)
        }
    })
    //2.设置点击火箭返回顶部
    $('.to_Top').click(function () {
        $('html body').animate({scrollTop: 0})
    })

    //3.添加li
    //创建数组保存事项
    var itemArr;
    /*当j界面加载进来的时候，就去从从存储的数据中拿出对应的数据，如果没有才去加载*/
    itemArr = store.get('itemArray')||[];
    //渲染界面
    render_view();
    $('input[type=submit]').on('click', function (event) {
        //去掉默认事件
        event.preventDefault();
        //获取输入的内容
        var text = $('input[type=text]').val();
        //判断内容是否为空
        if ($.trim(text) == '') {
            alert('请输入内容');
            return;
        } else {
            //创建事项
            var item = {
                title: '',
                content: '',
                isCheck: false,
                remind_time: '',
                is_notice: false
            };
            //设置事项相关属性
            item.title = text;
            //添加到数组保存起来
            itemArr.push(item);
            //根据数组长度添加li，并显示出来
            render_view()
        }
    });
    function render_view() {
        //存储数据  第一个参数是表示，用来取出数据，第二个表示要存储的数据
        store.set('itemArray',itemArr);
        //先清空上次内容
        $('.task').empty();
        $('.finsh_task').empty();
        for (var i = 0; i < itemArr.length; i++) {
            var obj = itemArr[i];
            if (obj == undefined || !obj) {
                continue;
            }
            //创建li，给li绑定索引
            var li = $(
                '<li data-index=' + i + '>' +
                '<input type="checkbox"' + (obj.isCheck ? 'checked' : '') + '>' +
                '<span>' + obj.title + '</span>' +
                '<span class="del"> 删除 </span>' +
                '<span class="detail"> 详情</span>'+
                '</li>'
            );
            //添加li
            // 根据是否检查过，来确认添加到待选事件还是完成事件
            if (obj.isCheck) {
                $('.finsh_task').prepend(li);
            } else {
                $('.task').prepend(li);
            }
        }
    }

    //4.切换tab
    $('.header li').click(function () {
        //切换
        $(this).addClass('cur').siblings().removeClass('cur');
        //获取点击的li的索引
        var index = $(this).index();
        //切换下面的div
        $('.body').eq(index).addClass('active').siblings().removeClass('active');
    });
    //5.点击删除对应li
    $('.body').on('click', '.del', function () {
        //获取del所在的li
        var item = $(this).parent();//this代表着.del 是这个触发事件
        //获取li对应的索引
        var index = item.data('index');
        //为了代码严谨，我们可以回索引进行判断
        if (index == undefined || !itemArr[index]) {
            return;
        }
        //删除数组中的数组
        delete itemArr[index];
        //删除节点
        item.slideUp(200, function () {
            item.remove();
        })
    });
    //6.点击代办事项，让对应的代办事项变成已经完成
    $('.body').on('click','input[type=checkbox]',function () {
        //确定点击的索引
        var item = $(this).parent();
        var index = item.data('index');
        if (index == undefined || !itemArr[index]) {
            return;
        }
        // 拿出index中对应的数组中的元素
        var obj= itemArr[index];
        //设置isCheck为选中
        obj.isCheck = $(this).is(':checked');
        //用obj替换原来位置的属性
        itemArr[index] = obj;
        render_view();
        //存储数据
        store.set('itemArray',itemArr);
    })
});